<template>
  <div class="app-container">
    <el-button
      style="margin-left: 10px;margin-right: 10px;margin-bottom: 0px"
      type="primary"
      @click="addGeneral"
      >
      添加
    </el-button>


    <el-dialog
      key="actionDialog"
      :title="textMap[dialogStatu]"
      :visible.sync="dialogVisible"
      style="margin-left: 13rem">
      <el-form
        label-position="left"
        label-width="100px"
        style="width: 300px; "
        v-model="temp">
        <el-form-item label="标题">
          <el-input v-model="temp.title"/>
        </el-form-item>



        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadBaseUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="temp.details"  :autosize="{ minRows: 2, maxRows: 4}" style="width: 600px"></el-input>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="dialogStatu==='create'?addcommit():updatecommit()">提交</el-button>
      </div>
    </el-dialog>

    <!--列表数据  -->
    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="标题" prop="title" align="center"/>
      <el-table-column label="图片" prop="imgUrl" align="center">
        <template scope="scope">
          <img :src="baseUrl+scope.row.imgUrl" width="60px" height="60px">
        </template>
        </el-table-column>
      <el-table-column label="施工说明详情" prop="details" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="发布时间" prop="createTime" align="center"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="285px">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="updateGeneral(row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteGeneral(row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <pagination v-show="count > 0" align="center" :total="count" :page.sync="listQuery.page"
                :limit.sync="listQuery.size" @pagination="getList(listQuery.page,listQuery.size)"/>
  </div>
</template>
<script>
  // 后台接口数据
  import {getGeneralList,addGeneral,updateGeneral,deleteGeneral} from '@/api/general'
  import Pagination from '@/components/Pagination'
  export default {
    name: 'generalList',
    components: {Pagination},
    data() {
      return {
        imageUrl: '',
        dialogStatu: '',
        dialogVisible:false,
        textMap: {
          update: '编辑',
          create: '添加'
        },
        temp:{
          title:'',
          details:''
        },
        listQuery:{
          page:1,
          size:10
        },
        baseUrl:process.env.VUE_APP_BASE_API+'/static/pic/show/',
        uploadBaseUrl:process.env.VUE_APP_BASE_API+'/static/pic/upload',
        count:0,
        list:[],
        image:'',
        editId:'',
        editImage:''
      }
    },

    created() {
      this.getList(1,10)
    },

    methods: {
      deleteGeneral(row){
        console.log(row.id)
        deleteGeneral(row.id).then(res =>{
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getList(1,10)
        })
      },

      updateGeneral(row){
        this.dialogStatu='update'
        this.dialogVisible=true
        this.temp=row
        this.imageUrl=this.baseUrl+row.imgUrl
        this.editImage=row.imgUrl
        this.editId=row.id
      },
      updatecommit(){
      var data={
        id:this.editId,
        title:this.temp.title,
        imgUrl:!this.image?this.editImage:this.image,
        details:this.temp.details
      }
        updateGeneral(data).then(res =>{
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.dialogVisible=false
          this.getList(1,10)
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(this.imageUrl)
        this.image=res.data
        console.log(this.image)
      },
      addGeneral(){
        this.dialogStatu = 'create'
        this.dialogVisible = true
        this.temp = {}
        this.imageUrl=''
      },
      addcommit(){
        var data={
          title:this.temp.title,
          imgUrl:this.image,
          details:this.temp.details
        }
        addGeneral(data).then(res =>{
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.dialogVisible=false
          this.getList(1,10)
        })

      },

      getList(page, size) {
        var params = {
          page: page,
          size: size,
        }
        // 得到所有用户的接口
        getGeneralList(params).then(res => {
          this.list = res.data
          this.count = res.count
          this.listQuery.page=page
          this.listQuery.size=size
        })
          .catch(err => {
          })
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>

